<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.html {
				width: 1600px;
				height: 1000px;
				position: relative;
				margin: 0 auto;
			}
			
			.head {
				height: 200px;
				width: 1600px;
				background-color: lightskyblue;
				position: absolute;
				top: 20px;
				left: 0;
			}
			
			ul li {
				list-style: none;
				float: left;
				margin-top: 10px;
			}
			
			a {
				padding: 40px 20px;
			}
			
			ul img {
				width: 200px;
				height: 150px;
			}
		</style>
	</head>

	<body>
		<div class="html">
			<img src="img/作业皮肤/image/1.jpg" id="image" />
			<div class="head">
				<ul id="gallery">
					<li>
						<a href="#" title="first" name="img/作业皮肤/image/1.jpg">
							<img src="img/作业皮肤/image/1.jpg" />
						</a>
					</li>
					<li>
						<a href="#" title="second" name="img/作业皮肤/image/2.jpg">
							<img src="img/作业皮肤/image/2.jpg" />
						</a>
					</li>
					<li>
						<a href="#" title="third" name="img/作业皮肤/image/3.jpg">
							<img src="img/作业皮肤/image/3.jpg" />
						</a>
					</li>
					<li>
						<a href="#" title="fourth" name="img/作业皮肤/image/4.jpg">
							<img src="img/作业皮肤/image/4.jpg" />
						</a>
					</li>
					<li>
						<a href="#" title="fifth" name="img/作业皮肤/image/5.jpg">
							<img src="img/作业皮肤/image/5.jpg" />
						</a>
					</li>
				</ul>
			</div>
		</div>
		<script>
			var ul = document.getElementById("gallery");
			var aArray = document.getElementsByTagName("a");
			var image = document.getElementById("image");
			for(var i = 0; i < aArray.length; i++) {
				aArray[i].onclick = function() {
					image.src = this.name;

				}
			}
		</script>
	</body>

</html>